<script setup lang="ts">
import {onMounted, ref} from "vue";
import {deleteById, useGetMaterialTypeCountAPI, useGetMaterialTypeListAPI} from "@/apis/materialType.js";
import {ComponentSize, ElMessage, ElMessageBox} from "element-plus";
import router from "@/router/index.js";

const materialTypeList=ref([]);
const materialTypeCount=ref(0);
onMounted(async ()=>{
  const res=await useGetMaterialTypeListAPI(current.value,pageSize.value);
  materialTypeList.value=res.data;
  const resCount=await useGetMaterialTypeCountAPI();
  materialTypeCount.value=resCount.data;
})

const updateMaterialType=(id:number)=>{
  router.push({path:`/manage/materialTypeUpdate/${id}`})
}

const deleteMaterialType=async (id:number)=>{

  await ElMessageBox.confirm(
    '此操作将永久删除该类型, 是否继续?',
    'warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(async () => {
    await deleteById(id);
   materialTypeList.value= materialTypeList.value.filter((materialType: any) => materialType.id!== id);
  ElMessage({
    type:'success',
    message: '删除成功!',
  })
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消删除',
    })
  })
}

// 分页组件
const size = ref<ComponentSize>('small');
const background = ref(true)
const disabled = ref(false)
const current=ref(1);
const pageSize=ref(15);

const handleSizeChange=async (val:any)=>{
  const res=await useGetMaterialTypeListAPI(current.value,val);
  materialTypeList.value=res.data;
}
const handleCurrentChange=async (val:any)=>{
  const res=await useGetMaterialTypeListAPI(val,pageSize.value);
  materialTypeList.value=res.data;
}


</script>

<template>

  <div class="demo-pagination-block" style="float: right">
    <el-pagination
        v-model:current-page="current"
        v-model:page-size="pageSize"
        :page-sizes="[15, 30, 45]"
        :size="size"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="materialTypeCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>

  <el-table
      :data="materialTypeList"
      style="width: 100%"
      stripe
      border
      max-height="800"
      :default-sort="{prop:'userId',order:'ascending',}"
  >
    <el-table-column align="center" prop="id" fixed label="ID" width="70" />
    <el-table-column align="center" prop="parentType" fixed label="父类型" width="130" />
    <el-table-column align="center" prop="childType" fixed label="子类型" width="130" />
    <el-table-column align="center"  prop="fullName" label="全名称" width="200" />
    <el-table-column prop="description" label="备注" width="300" />
    <el-table-column  label="操作" width="220" fixed="right">
      <!--  在操作这一栏，添加一个template元素，加一个#default属性，通过这个属性，获取到这一行的数据，是个对象
                   scope：就是el-table表格中被选中的那一行的数据，通过scope获取到该行的数据-->
      <template #default="scope">
        <el-button size="small" type="warning" plain  @click="updateMaterialType(scope.row.id)">修改</el-button>
        <el-button size="small" type="warning" plain  @click="deleteMaterialType(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <div  class="demo-pagination-block" style="float: right">
    <el-pagination
        v-model:current-page="current"
        v-model:page-size="pageSize"
        :page-sizes="[15, 30, 45]"
        :size="size"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="materialTypeCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>

<style scoped lang="scss">

</style>